<template>
    <el-dialog
        :title="title"
        :visible.sync="dialogVisible"
        :close-on-click-modal="false"
        destroy-on-close
        width="40%"
        custom-class="resource-add-popup">
        <el-form :inline="true" :model="form" class="demo-form-inline">
            <el-form-item>
                <el-input v-model="form.keyword" placeholder="请输入资源维度名称"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="searchData">搜索</el-button>
            </el-form-item>
        </el-form>
        <el-table
            ref="multipleTable"
            :data="tableData"
            border
            row-key="id"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column
                align="center"
                type="selection"
                :reserve-selection="true"
                width="60">
            </el-table-column>
            <el-table-column
                v-for="item in popupTableColumn"
                :key="item.id"
                :prop="item.prop"
                :label="item.label"
                show-overflow-tooltip>
            </el-table-column>
        </el-table>
        <pagination
            class="pagination-tool"
            v-show="total > 0"
            :total="total"
            :page.sync="pageIndex"
            :limit.sync="pageSize"
            small
            layout="prev, pager, next"
            @pagination="getTable"/>
        <div class="selected-content" v-if="multipleSelection.length">
            <p class="label">已选</p>
            <div class="selected-box">
                <badge-delete-box :list="multipleSelection" @deleteItem="deleteItem" />
            </div>
        </div>
        <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="saveSelected">确 定</el-button>
    </span>
    </el-dialog>
</template>

<script lang="ts">
import Vue from "vue";
import { Component, Prop, Watch } from "vue-property-decorator";
import BadgeDeleteBox from "@/components/badge-delete-box/index.vue";
import { buildCustomObj } from "@/utils";

@Component({
    components: {
        BadgeDeleteBox
    }
})
export default class ResourceAddPopup extends Vue {
    @Prop({ required: true }) private title!: string
    @Prop({ required: true }) private popupTableColumn!: object[]
    @Prop({ default: [] }) private selectedData!: object[]
    @Watch("selectedData", { immediate: true })
    changeSelectedData() {
        this.multipleSelection = this.selectedData;
        this.$nextTick(() => {
            this.multipleSelection.forEach((row: any) => {
                (this.$refs.multipleTable as any).toggleRowSelection(row);
            });
        });
    }

    // 搜索条件
    form = {
        keyword: ""
    };

    // 显示弹窗
    dialogVisible = false;
    // 数据总数
    total = 0;
    // 每页数量
    pageSize = 10;
    // 当前页码
    pageIndex = 1;
    // 表格数据
    tableData = [];

    // 选中的值
    multipleSelection: any = [];

    // 打开弹窗
    showDialog() {
        this.dialogVisible = true;
        this.getTable();
    }

    // 关闭弹窗
    closeDialog() {
        this.dialogVisible = false;
        this.multipleSelection = [];
        this.pageIndex = 1;
    }

    // 点击查询
    searchData() {
        this.pageIndex = 1;
        this.getTable();
    };

    // 查询表格
    async getTable() {
        let url = "";
        let data = {};
        if (this.$route.name === "LabelTemplateDetails") {
            url = "moduleManage/list";
            data = {
                keyword: this.form.keyword,
                name: this.form.keyword,
                pageSize: this.pageSize,
                currentPage: this.pageIndex
            };
        } else {
            url = "resource/all";
            data = {
                keyword: this.form.keyword,
                pageSize: this.pageSize,
                currentPage: this.pageIndex
            };
        }
        const res = await this.$server[url]({
            data: data
        });
        if (res.data.code === 200) {
            this.tableData = buildCustomObj(res.data.data.records, [...this.popupTableColumn, { prop: "id", name: "id" }]);
            this.total = res.data.data.total;
        } else {
            this.$message.error(res.data.message || "接口请求错误!");
        }
    }

    // 选中修改
    handleSelectionChange(val: any) {
        this.multipleSelection = val;
    }

    // 删除选中项
    deleteItem(data: any) {
        const rows = this.tableData.filter((item: any) => data.id === item.id);
        if (rows.length) {
            (this.$refs.multipleTable as any).toggleRowSelection(rows[0]);
        } else {
            (this.$refs.multipleTable as any).toggleRowSelection(data);
        }
    }

    // 保存选中项
    saveSelected() {
        const data = this.multipleSelection.map((item: any) => {
            return item.id;
        }).join(",").split(',');
        this.$emit("saveData", data);
    }
}
</script>

<style lang="scss">
    .resource-add-popup {
        margin-top: 10vh!important;
        .el-dialog__body {
            padding: 10px 20px;
            .el-form-item {
                margin-bottom: 10px;
            }
        }
        .pagination-tool {
            text-align: center!important;
            padding: 8px!important;
        }
        .selected-content {
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;
            .label {
                width: 50px;
                line-height: 36px;
                margin: 0;
            }
            .selected-box {
                width: 100%;
            }
        }
    }
</style>
